<template>
	<div class="secondNav">
		<bnav></bnav>
		<div class="secNav">
			<router-link :to="{name:'channel',params:{tid:curTid}}" class="list">推荐</router-link>
			<router-link :to="{name:'channel',params:{tid:item.tid}}" v-for="(item,index) in secondNavList" :key="index" class="list">
				{{item.typename}}
			</router-link>
		</div>
		{{tid}}
	</div>
</template>

<script>
	let partitionList = window.__INITIAL_STATE__.reduxAsyncConnect.partitionList
	import bnav from "components/nav";
	export default{
		components:{
			bnav,
		},
		data(){
			return {
				NavList:[],
				curTid:"1"
			}
		},
		created(){
			this.NavList = partitionList[this.tid]
			this._SetSecondNavList(this.$route.params.tid)
			this.$store.commit('setTid',{
				curTid:this.$route.params.tid
			})
		},
		props:{
			tid:{
				type:[String,Number],
				default:"1"
			}
		},
		watch:{
			$route(newValue){
				this.$emit("PchangeTid",newValue.params.tid)
			},
			tid(newValue){
				//实时更新NavList的内容
//				this.NavList = partitionList[this.tid]
//				this.secondNavList = partitionList[newValue]
			}
		},
		computed:{
			secondNavList:{
				get:function(){
					this.curTid=this.$store.getters.getCurTid
					this.NavList = partitionList[this.curTid]
					return this.NavList
				},
				set:function(newValue){
//					if(newValue){
////						console.log(newValue)
////						console.log(this.curTid)
//						if(newValue){
//							this.curTid = this.$store.getters.getCurTid
//						}
//						this.NavList = partitionList[this.curTid]
//					}
//					this.NavList = partitionList[this.curTid]
				}
			}
		},
		methods:{
			_SetSecondNavList(tid){
				const hasCon = partitionList[this.tid]
//				遍历大对象的属性名(键名)
				const keyArr = Object.keys(partitionList)
				const res = keyArr.some((ele)=>{
					return ele = this.tid
				})
				let arr = []
				if(res){
					this.curTid = this.tid
				}
				if(!hasCon){
					let findcurTid=()=>{
//						核心代码:tid==obj.tid
						for(let i=0,len=keyArr.length;i<len;i++){
//							你一定要清楚,你访问的元素是什么
							let tmpArr = partitionList[keyArr[i]]
							for(let j=0,length=tmpArr.length;j<length;j++){
								if(tmpArr[j].tid==this.tid){
									return keyArr[i]
								}
							}
						}
					}
					this.curTid = findcurTid()
				}
				else{
					this.curTid = tid
				}
				this.$store.commit("setCurTid",this.curTid)
				this.NavList = partitionList[this.curTid]
			}
		},
	}
</script>

<style lang="scss">
	.secondNav{
		    position: relative;
		    top: 90px;
		    width: 100%;
		    overflow: hidden;
	        background-color: #f9f9f9;
		    height: 37.5px;
		    z-index: 1;
		    margin-top: -1px;
		    transition: transform .5s;
		.secNav{
			overflow-x: scroll;
		    overflow-y: hidden;
		    white-space: nowrap;
		    padding-left: 17.5px;
		    -webkit-overflow-scrolling: touch;
		    padding-bottom: 4px;
		    &::-webkit-scrollbar {
					display: none;
				}
		    .list{
		    	margin-right: 20px;
	    	    font-size: 16px;
			    line-height: 39px;
			    text-align: center;
			    color: #757575;
		    }
		    .router-link-exact-active{
		        font-size: 16px;
			    line-height: 22px;
			    text-align: center;
			    color: #fb7299;
	}
		}
	}
</style>